<!-- eslint-disable no-unreachable -->
<template>
    <div>
  
      <el-container>
        <!-- 搜索栏 -->
        <el-header>
          <el-row :gutter="20" style="padding: 5px 20px;">
            <el-col :span="6"><el-input v-model="searchModel.username" placeholder="项目名称" clearable @keyup.enter.native="getlogsList" /></el-col>
            <el-col :span="6"><el-button type="primary" round icon="el-icon-search" @click="getLogsList">搜索</el-button></el-col>
          </el-row>
        </el-header>
  
        <!-- 结果列表 -->
        <el-main>
          <el-table :data="list" style="width: 100%">
            <el-table-column type="index" label="index" width="100">
              <template slot-scope="scope">
                {{ (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="id" label="id" width="100" />
            <el-table-column prop="operation" label="操作模块" width="150" />
            <el-table-column prop="type" label="操作类型" width="100">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.type === '新增'" type="">新增</el-tag>
                <el-tag v-else-if="scope.row.type === '更新'" type="success">更新</el-tag>
                <el-tag v-else-if="scope.row.type === '删除'" type="info">删除</el-tag>
                <el-tag v-else-if="scope.row.type === '登录'" type="danger">登录</el-tag>
                <el-tag v-else-if="scope.row.type === '退出'" type="danger">退出</el-tag>
                <el-tag v-else="scope.row.type === '注册'" type="warning">注册</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="ip" label="IP地址" />
            <el-table-column prop="username" label="用户" />
            <el-table-column prop="time" label="操作时间" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="deleteLogs(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
  
        <!-- 分页 -->
        <el-footer>
          <el-pagination
            :current-page="searchModel.pageNo"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="searchModel.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-footer>
      </el-container>
    </div>
  </template>
  
  <script>
  import logsRequest from '@/api/logsManage'
  export default {
    data() {
      return {
        totalPage: 0,
        searchModel: {
          username: '',
          pageNo: 1,
          pageSize: 10
        },
        list: [],
      }
    },
    created() {
      this.getLogsList()
    },
    methods: {
      handleSizeChange(pageSize) {
        this.searchModel.pageSize = pageSize
        this.getLogsList()
      },
      handleCurrentChange(pageNo) {
        this.searchModel.pageNo = pageNo
        this.getLogsList()
      },
      getLogsList() {
        // then是调完后的回调方法
        // 在then中把数据传回过来, total 和 list要复制
        logsRequest.getLogsList(this.searchModel).then(response => {
          this.totalPage = response.data.totalPage
          this.list = response.data.rows
        })
      },
      deleteLogs(logs) {
        this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          logsRequest.deleteLogsById(logs.id).then(response => {
            this.$message({
              type: 'success',
              message: response.message
            })
            this.getLogsList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      timestampToTime(timestamp) {
        timestamp = timestamp ? timestamp : null;
        let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let Y = date.getFullYear() + '-';
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
        let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
        return Y + M + D + h + m + s;
      }
    }
  }
  </script>
  
  <style>
    .el-dialog .el-input {
      width: 70%;
    }
  </style>
  